<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

	<div id="content">
		
		<div id="pageTitle">
			<span class="titlePage">ALUNOS</span>
		</div>


		<div id="tableContents">
			<h:form id="formShowAlunos" >
				<p:commandButton id="newButton" value="#{msg.button_add_student}" 
									icon="ui-icon-plusthick" ajax="true" 
									oncomplete="PF('newAlunoModal').show();" 
									actionListener="#{addStudentController.newStudent}" update=":newAlunoModal" />
				<p:scrollPanel mode="native">
				<p:dataTable var="aluno" value="#{studentManagerController.alunos}" rows="10"
					paginator="true" paginatorPosition="bottom"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					row="7"
					filteredValue="#{studentManagerController.filteredAlunos}">
					
					<!-- Image -->
					<p:column headerText="#{msg.label_image}" style="text-align:center">
						<p:graphicImage alt="#{msg.label_image}" title="#{msg.label_profile_image}" url="#{aluno.imagem}" styleClass="profilePhotoOnTable" />
					</p:column>
					
					<p:column filterBy="#{aluno.nome}" headerText="#{msg.label_student}" style="text-align:center"
						filterMatchMode="contains">
						<h:outputText value="#{aluno.nome}" />
					</p:column>
					
					<!-- Just to get a better view on page
					<p:column filterBy="#{aluno.cpf}" headerText="#{msg.label_cpf}" style="text-align:center"
						filterMatchMode="contains">
						<h:outputText value="#{aluno.cpf}" />
					</p:column> 
					-->
					
					<p:column filterBy="#{aluno.dataNascimento}" headerText="#{msg.label_birthday}" style="text-align:center"
						filterMatchMode="contains">
						<h:outputText value="#{aluno.dataNascimento}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</p:column>
					
					<p:column filterBy="#{aluno.tel}" headerText="#{msg.label_phone}" style="text-align:center"
						filterMatchMode="contains">
						<h:outputText value="#{aluno.tel}" />
					</p:column>
					
					<p:column filterBy="#{aluno.vencimento.dia}" headerText="#{msg.label_payment_day}" style="text-align:center"
						filterMatchMode="contains">
						<h:outputText value="#{aluno.vencimento.dia}" />
					</p:column>
					
					<p:column headerText="#{msg.label_header_service}">
							<!-- Link to edit student -->
							<p:commandLink id="editStudent" ajax="true" 
									action="#{addStudentController.loadStudent(aluno.id)}" 
									update=":formNewAluno" oncomplete="PF('newAlunoModal').show();" >
								<h:graphicImage library="images" value="/css/img/edit.png" title="#{msg.msg_edit_student}" />
							</p:commandLink>
							
							<!-- Link to remove student -->
							<p:commandLink actionListener="#{studentManagerController.deleteStudent(aluno)}" update=":formShowAlunos">
								<h:graphicImage library="images" value="/css/img/del.png" title="#{msg.msg_del_student}" />
						        <p:confirm header="#{msg.msg_confirmation}" message="#{msg.msg_confirm_del_student}" icon="ui-icon-alert" />
						    </p:commandLink>
						    
						    <!-- The dialog to confirm the removal or not -->
							<p:confirmDialog global="true" showEffect="fade">
						        <p:commandButton value="#{msg.label_yes}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						        <p:commandButton value="#{msg.label_no}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
						    </p:confirmDialog>
						    
						    <!-- Generate Carne -->
							<p:commandButton actionListener="#{studentManagerController.generateCarne(aluno)}" 
											value="#{msg.generate_carne}">
							</p:commandButton>
							
							<!-- Payment button -->
							<p:commandButton actionListener="#{addPaymentController.openPayment(aluno)}" 
											value="#{msg.button_add_payment}"
											oncomplete="PF('newPaymentModal').show();"
											update=":formNewPayment">
								
							</p:commandButton>
						</p:column>
					
				</p:dataTable>
				</p:scrollPanel>
			</h:form>
		</div>
	</div>
	
	<!-- Includes to call the form to add aluno -->
	<ui:include src="formNewAluno.xhtml" />	
	<!-- Includes to call the form to add a new payment -->
	<ui:include src="formNewPayment.xhtml" />	
</ui:composition>